<style lang="less">
  img.head-img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
  }
</style>
<template>
  <div>
    <Row>
      <Col span="24">
        <Card style="margin-bottom: 10px">
          <Form inline>
            <FormItem style="margin-bottom: 0">
              <Select v-model="searchConf.status" clearable placeholder='请选择状态' style="width:100px">
                <Option :value="1">启用</Option>
                <Option :value="0">禁用</Option>
              </Select>
            </FormItem>
            <FormItem style="margin-bottom: 0">
              <Select v-model="searchConf.type" clearable placeholder='会员类型' style="width:100px">
                <Option :value="GLOBAL.USER_TYPE_NORMAL">普通会员</Option>
                <Option :value="GLOBAL.USER_TYPE_VIP">VIP用户</Option>
              </Select>
            </FormItem>
            <FormItem style="margin-bottom: 0">
              <Select v-model="searchConf.search_type" clearable placeholder="请选择类别" style="width:100px">
                <Option :value="1">用户昵称</Option>
                <Option :value="2">用户名</Option>
              </Select>
            </FormItem>
            <FormItem style="margin-bottom: 0">
              <Input v-model="searchConf.keywords" placeholder=""></Input>
            </FormItem>
            <FormItem style="margin-bottom: 0">
              <Button type="primary" @click="search">{{ $t('find_button') }}/{{ $t('refresh_button') }}</Button>
            </FormItem>
          </Form>
        </Card>
      </Col>
    </Row>
    <Row>
      <Col span="24">
        <Card>
          <QAuth :access="'admin/User/add'">

          </QAuth>

          <div>
            <Table :columns="columnsList" :data="tableData" border disabled-hover></Table>
          </div>
          <div class="margin-top-15" style="text-align: center">
            <Page :total="tableShow.listCount" :current="tableShow.currentPage"
                  :page-size="tableShow.pageSize" @on-change="changePage"
                  @on-page-size-change="changeSize" show-elevator show-sizer show-total></Page>
          </div>
        </Card>
      </Col>
    </Row>
    <Modal v-model="modalSetting.show" width="668" :styles="{top: '30px'}" @on-visible-change="doCancel">
      <p slot="header" style="color:#2d8cf0">
        <Icon type="md-alert"></Icon>
        <span>编辑用户</span>
      </p>
      <Form ref="myForm" :rules="ruleValidate" :model="formItem" :label-width="80">
        <FormItem label="昵称">
          <Input v-model="formItem.nickname" readonly></Input>
        </FormItem>
        <FormItem label="头像">
          <img class="head-img" :src="formItem.head_img"/>
        </FormItem>
        <FormItem label="帐号" prop="username">
          <Input v-model="formItem.username" placeholder="请输入帐号"></Input>
        </FormItem>
        <FormItem label="用户密码" prop="password">
          <Input v-model="formItem.password" type="password" placeholder="用户密码"></Input>
        </FormItem>
        <FormItem label="用户类型" prop="group_id">
          <RadioGroup v-model="formItem.type">
            <Radio :label="GLOBAL.USER_TYPE_VIP">VIP</Radio>
            <Radio :label="GLOBAL.USER_TYPE_NORMAL">普通用户</Radio>
          </RadioGroup>
        </FormItem>
        <FormItem v-if="formItem.type===GLOBAL.USER_TYPE_VIP" label="VIP到期时间" prop="date">
          <DatePicker  v-model="formItem.date" format="yyyy-MM-dd HH:mm"
                      placeholder="选择到期日期" style="width:220px"></DatePicker>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="text" @click="cancel" style="margin-right: 8px">取消</Button>
        <Button type="primary" @click="submit" :loading="modalSetting.loading">确定</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
  import {getList, changeStatus, edit, getDetail} from '@/api/app-user'
  import {checkPhoneNum} from '@/libs/util'
  import QAuth from '../../components/auth.vue'

  const editButton = (vm, h, currentRow, index) => {
    return h('Button', {
      props: {
        type: 'primary'
      },
      style: {
        margin: '0 5px'
      },
      on: {
        'click': () => {
          vm.formItem.id = currentRow.id;
          getDetail(vm.formItem.id).then(rep=>{
            vm.formItem.username = rep.data.data.username;
            vm.formItem.nickname = rep.data.data.nickname;
            vm.formItem.head_img = rep.data.data.head_img;
            vm.formItem.password = rep.data.data.password;
            vm.formItem.type = rep.data.data.type;
            vm.formItem.date = rep.data.data.expiration_time;
          });
          // vm.formItem.username = currentRow.username;
          // vm.formItem.nickname = currentRow.nickname;
          // vm.formItem.head_img = currentRow.head_img;
          // vm.formItem.password = currentRow.password;
          // vm.formItem.type = currentRow.type;
          // vm.formItem.date = currentRow.date;
          vm.modalSetting.show = true;
          vm.modalSetting.index = index
        }
      }
    }, vm.$t('edit_button'))
  }
  let _this = null;
  export default {
    name: 'system_user',
    components: {
      QAuth
    },
    data() {
      return {
        columnsList: [
          {
            title: '序号',
            type: 'index',
            width: 65,
            align: 'center'
          },
          {
            title: '用户账号',
            align: 'center',
            key: 'username',
            width: 130
          },
          {
            title: '昵称',
            align: 'center',
            key: 'nickname',
            width: 120
          },
          {
            title: '头像',
            align: 'center',
            render: (h, params) => {
              return h('img', {attrs: {src: params.row.head_img,class:'head-img'}})
            },
            width: 90
          },
          {
            title: '是否VIP',
            align: 'center',
            render: (h, params) => {
              return h('span', params.row.type === _this.GLOBAL.USER_TYPE_VIP ? '是' : '否')
            },
            width: 90
          },
          {
            title: '创建时间',
            align: 'center',
            render: (h, params) => {
              return h('span', params.row === null ? '' : params.row.create_time)
            },
            width: 160
          },
          {
            title: '状态',
            align: 'center',
            width: 100,
            render: (h, params) => {
              let vm = this
              return h('i-switch', {
                attrs: {
                  size: 'large'
                },
                props: {
                  'true-value': 1,
                  'false-value': 0,
                  value: params.row.status,
                  'before-change':()=>{
                    return new Promise((resolve) => {
                      let status = -1;
                      if(params.row.status===_this.GLOBAL.USER_STATUS_NORMAL){
                        status = _this.GLOBAL.USER_STATUS_BAND
                      }else {
                        status = _this.GLOBAL.USER_STATUS_NORMAL
                      }
                      changeStatus(status, params.row.id).then((response) => {
                        if(response.data.code===1){
                          resolve();
                          params.row.status = status;
                        }
                        // vm.getList()
                      }, (error) => {
                      })
                    });
                  }
                },
                on: {
                  'on-change': function (status) {
                  }
                }
              }, [
                h('span', {
                  slot: 'open'
                }, vm.$t('open_choose')),
                h('span', {
                  slot: 'close'
                }, vm.$t('close_choose'))
              ])
            }
          },
          {
            title: '操作',
            align: 'center',
            render: (h, params) => {
              return h('div', [
                editButton(this, h, params.row, params.index)
              ])
            }
          }
        ],
        uid: '',
        tableData: [],
        tableShow: {
          currentPage: 1,
          pageSize: 10,
          listCount: 0
        },
        searchConf: {
          search_type: -1,
          type: '',
          keywords: '',
          status: ''
        },
        modalSetting: {
          show: false,
          loading: false,
          index: 0
        },
        formItem: {
          date:null,
          username: '',
          nickname: '',
          password: '',
          type: '',
          id: 0
        },
        ruleValidate: {
          username: [
            {required: false, message: '用户须为手机号', trigger: 'blur'},
            {
              validator: (rule, value, callBack) => {
                if (!value) {
                  callBack();
                } else if (checkPhoneNum(value)) {
                  callBack();
                } else {
                  callBack('请输入正确的手机号码');
                }
              }
            }
          ],
          date: [
            {required: true, type: 'date', message: '请选择日期', trigger: 'change'},
            {
              validator: (rule, value, callback) => {
                if (_this.formItem.type === _this.GLOBAL.USER_TYPE_VIP) {
                  if (!_this.formItem.date) {
                    callback('请选择日期');
                  } else {
                    callback();
                  }
                }
              }
            }
          ],
          password: [
            {required: false, message: '用户密码不能为空', trigger: 'blur'}
          ]
        }
      }
    },
    created() {
      _this = this;
      let userInfo = this.$store.state.user.userInfo;
      this.uid = userInfo.id;
      this.getList()
    },
    methods: {

      submit() {
        let vm = this;
        this.$refs['myForm'].validate((valid) => {
          if (valid) {
            vm.modalSetting.loading = true;
            if(vm.formItem.type===vm.GLOBAL.USER_TYPE_VIP){
              vm.formItem.date = vm.GLOBAL.convertUTCTimeToLocalTime(vm.formItem.date);
            }
            edit(vm.formItem).then(response => {
              vm.$Message.success(response.data.msg);
              vm.getList();
              vm.cancel()
            }).catch(() => {
              vm.cancel()
            })
          }
        })
      },
      cancel() {
        this.modalSetting.show = false
      },
      doCancel(data) {
        if (!data) {
          this.formItem.id = 0;
          this.$refs['myForm'].resetFields()
          this.modalSetting.loading = false;
          this.modalSetting.index = 0
        }
      },
      changePage(page) {
        this.tableShow.currentPage = page;
        this.getList()
      },
      changeSize(size) {
        this.tableShow.pageSize = size;
        this.getList()
      },
      search() {
        this.tableShow.currentPage = 1;
        this.getList()
      },
      getList() {
        let vm = this;
        let params = {
          page: vm.tableShow.currentPage,
          size: vm.tableShow.pageSize,
          type: vm.searchConf.type,
          search_type: vm.searchConf.search_type,
          keywords: vm.searchConf.keywords,
          status: vm.searchConf.status
        };
        getList(params).then(response => {
          vm.tableData = response.data.data.list;
          vm.tableShow.listCount = response.data.data.count
        })
      }
    },
    beforeDestroy() {
      _this = null;
    }
  }
</script>
